<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="css :: css">

</head>
<link href="/css/custom.css" rel="stylesheet">
<link href="/js/fileUpload/fileinput.css" rel="stylesheet">
<body style="overflow: hidden;opacity: 1">

<div id="cl-wrapper" style="padding-top: 0">
    <div class="container-fluid">
        <div class="cl-mcont">
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <form class="form-horizontal group-border-dashed" onsubmit="return false;">
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="卡种名称" id="cardOperatorName"/>
                                </div>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="卡种编号"
                                           id="query_cardOperatorId"/>
                                </div>
                                <!--<div class="input-group">
                                    <input type="text" class="form-control" placeholder="闲鱼卡密SPU" id="query_spuid"/>
                                </div>-->
                                <div class="input-group">
                                    <select class="form-control" id="cardTypeId">

                                    </select>
                                </div>
                                <!--<div class="input-group">
                                    <select class="form-control" id="spuStatus">
                                        <option value="" selected>闲鱼卡密SPU状态</option>
                                        <option value="0">上架</option>
                                        <option value="1">下架</option>
                                    </select>
                                </div>-->

                                <div class="input-group">
                                    <button class="btn btn-primary" type="button" id="search"><i
                                            class="fa fa-search"></i>查询
                                    </button>&nbsp;
                                    <button class="btn btn-success" type="button" id="success"
                                            onclick="addCardOperator()"><i class="fa fa-plus-square-o"></i>新增卡种
                                    </button>&nbsp;
                                    <button class="btn btn-warning btn-operation" type="button" id="update"
                                            onclick="updateCardOperator()"><i class="fa fa-plus-square-o"></i>编辑卡种
                                    </button>&nbsp;
                                    <button class="btn btn-warning btn-operation" type="button" id="update_xianyu"
                                            onclick="updateXianyuOriginalPriceRecovery()"><i
                                            class="fa fa-plus-square-o"></i>闲鱼原价回收状态
                                    </button>&nbsp;
                                   <!-- <button class="btn btn-warning btn-operation" type="button" id="update_xianyuSpu"
                                            onclick="updateXianyuSpuStatus()"><i
                                            class="fa fa-plus-square-o"></i>闲鱼端卡密SPU挂载
                                    </button>&nbsp;-->
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-flat">
                        <div class="content">
                            <div class="table-responsive">
                                <table class="table hover" id="dataTable">
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--新增-->
                    <div class="modal inmodal fade" id="myModa9" tabindex="-1" role="dialog"
                         aria-labelledby="addOperatorModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog ">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                    </button>
                                    <h4 class="modal-title" id="addOperatorModalLabel">新增卡种</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal m-t" id="attach"
                                          method="post">
                                        <input type="hidden" id="hidCardOperatorId" name="cardOperatorId">
                                        <input type="hidden" id="modalType" name="cardOperatorId">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">卡种：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" placeholder="卡种名称"
                                                                   id="editCardOperatorName" name="cardOperatorName"/>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">卡种编号：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" placeholder="卡种编号"
                                                                   id="editCardOperatorId" name="cardOperatorId"/>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">卡类型：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <select class="form-control" id="editCardTypeId"
                                                                    name="cardTypeId" style="width: 153px;">

                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">彩色卡种logo：</label>
                                                    <div class="col-sm-6">
                                                        <input type="file" id="logoColoursFile" name="logoColoursFile"
                                                               class="file-loading"
                                                               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">黑白卡种logo：</label>
                                                    <div class="col-sm-6">
                                                        <input type="file" id="logoFile" name="logoFile"
                                                               class="file-loading"
                                                               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                                                    </div>
                                                </div>

                                                <span style="font-weight:bold;">闲鱼配置</span><hr style="margin:0px;height:1px;border:0px;background-color:#D5D5D5;color:#D5D5D5;"/>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">闲鱼卡种名称：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" placeholder="闲鱼卡种名称"
                                                                   id="editXianyuOperatorName"
                                                                   name="xianyuOperatorName"/>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" >卡密注意事项：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <textarea type="text" class="form-control"
                                                                      placeholder="卡密注意事项" style="width:400px;"
                                                                      id="tipText" name="tipText"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">卡券注意事项：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <textarea type="text" class="form-control"
                                                                      placeholder="卡券注意事项" style="width:400px;"
                                                                      id="ticketTipText" name="ticketTipText"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" id="logoColoursFileBase64"
                                                       name="logoColoursBase64">
                                                <input type="hidden" id="logoFileBase64" name="logoBase64">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" id="save">确定
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--挂载闲鱼spu-->
                    <div class="modal inmodal fade" id="myModalBySpu" tabindex="-1" role="dialog"
                         aria-labelledby="addOperatorModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog ">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                    </button>
                                    <h4 class="modal-title" id="addSpuModalLabel">闲鱼SPU模板挂载</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal m-t" id="spuForm"
                                          method="post">
                                        <input type="hidden" id="productType" name="productType"/>
                                        <input type="hidden" id="spuId_hidden" name="spuIdHidden"/>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">闲鱼状态：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <select class="form-control" id="actionType"
                                                                    name="actionType">
                                                                <option value="" selected>请选择</option>
                                                                <option value="0">上架</option>
                                                                <option value="1">下架</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">闲鱼SPU：</label>
                                                    <div class="col-sm-6">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="闲鱼spuId"
                                                                   id="spuId" name="spuId"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" id="saveSpu">确定
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div th:include="js :: js"></div>
<script type="text/javascript" th:attr="src=@{/js/jquery.form.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/jquery.parser.js}"></script>
<script type="text/javascript" src="js/jquery.icheck/icheck.min.js"></script>
<script type="text/javascript" src="js/fileUpload/fileinput.min.js"></script>
<script type="text/javascript" src="js/fileUpload/zh.js"></script>
<script>
    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();
        //初始化fileinput控件（第一次初始化）
        var num_str;
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: "CardProductController/getByte", //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true,//是否显示拖拽区域
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                maxFileSize: 10240,
                maxFileCount: 1,
                autoReplace: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            });
            //导入文件上传完成之后的事件
            $("#" + ctrlName).on("fileuploaded", function (event, data, previewId, index) {
                var success = data.response.success;
                if (success) {
                    $("#" + ctrlName + "Base64").val(data.response.message);
                    return
                }
                layer.msg(data.response.message);
            });
        }
        return oFile;
    }
    $(function () {

        $.ajax({
            type: "POST",
            url: "/CardProductController/queryAllCardTypeList",
            dataType: "json",
            success: function (data) {
                $("#cardTypeId").html("");
                var str = "<option value=\"\">卡类型</option>";
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        str += '<option value=' + data[i].cardTypeId + '>' + data[i].cardTypeName + '</option>'
                    }
                }
                $("#cardTypeId").append(str);
                $("#editCardTypeId").append(str);
            },
            beforeSend: function () {
            }
        });


        $('#dataTable').bootstrapTable({
            url: '/CardProductController/queryCardOperatorPage',
            height: $(window).height() - 200,
            pageSize: 30,
            pagination: true,
            pageList: [30, 50, 100],
            clickToSelect: true,
            singleSelect: true,
            queryParams: queryParams,
            uniqueId: 'id',
            queryParamsType: '',
            sidePagination: 'server',
            responseHandler: function (res) {
                return {
                    "total": res.total,
                    "rows": res.resultList
                };
            },
            columns: [
                {
                    checkbox: true
                },
                {
                    align: 'center',
                    formatter: function (v, row, index) {
                        return index + 1
                    }
                }, {
                    align: 'center',
                    field: 'cardOperatorId',
                    title: '卡种编号'
                }, {
                    align: 'center',
                    field: 'cardTypeName',
                    title: '卡类型'
                }, {
                    align: 'center',
                    field: 'cardOperatorName',
                    title: '卡种名称'
                },
               /* {
                    align: 'center',
                    field: 'spuStatus',
                    title: '闲鱼SPU状态',
                    formatter: function (v, o) {
                        return {
                            0: "<span style='color:#005200;'>上架</span>",
                            1: "<span style='color:red;'>下架</span>"
                        }[v];
                        ;
                    }
                },*/
                {
                    align: 'center',
                    field: 'logoColoursBase64',
                    title: '彩色logo',
                    formatter: function (v, o) {
                        return "<img src='data:image/png;base64," + v + "'>";
                    }
                }, {
                    align: 'center',
                    field: 'logoBase64',
                    title: '黑白logo',
                    formatter: function (v, o) {
                        return "<img src='data:image/png;base64," + v + "'>";
                    }
                }, {
                    align: 'center',
                    field: 'gmtCreateTime',
                    title: '创建/修改时间',
                    formatter: function (v, o) {
                        return o.gmtCreateTime + "<br/>" +
                            o.gmtModifiedTime + "<br/>";
                    }
                }, {
                    align: 'center',
                    field: 'remark',
                    title: '备注'
                },
                /*{
                    align: 'center',
                    field: 'spuid',
                    title: '闲鱼卡密SPU'
                }, */{
                    align: 'center',
                    field: 'xianyuOperatorName',
                    title: '闲鱼卡种名称'
                }, {
                    align: 'center',
                    field: 'originalPriceRecoveryStatus',
                    title: '闲鱼原价回收状态',
                    formatter: function (v, o) {
                        return {
                            "0": "关闭",
                            "1": "开启"
                        }[v];
                    }
                }
            ]
        });

        $("#search").click(function () {
            $("#dataTable").bootstrapTable("refresh");
        });


        $("#save").click(function () {
            var msg = $("#addOperatorModalLabel").attr("msg");
            var url;
            if (msg == 1) {
                url = "/CardProductController/addCardOperator"
            } else {
                url = "/CardProductController/updateCardOperator"
            }
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    id: $("#hidCardOperatorId").val(),
                    cardTypeId: $("#editCardTypeId").val(),
                    cardOperatorId: $("#editCardOperatorId").val(),
                    cardOperatorName: $("#editCardOperatorName").val(),
                    logoColoursBase64: $("#logoColoursFileBase64").val(),
                    logoBase64: $("#logoFileBase64").val(),
                    tipText: $("#tipText").val(),
                    xianyuOperatorName: $("#editXianyuOperatorName").val(),
                    ticketTipText:$("#ticketTipText").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        $("#myModa9").modal("hide");
                        $("#editCardTypeId").val("")
                        $("#editCardOperatorId").val("")
                        $("#editCardOperatorName").val("")
                        $("#logoColoursFile").text("")
                        $("#logoFile").text("")
                        $("#logoColoursFileBase64").val("")
                        $("#logoFileBase64").val("")
                        $("#ticketTipText").val("")
                        $("#dataTable").bootstrapTable("refresh");
                        layer.msg("操作成功");
                    } else {
                        layer.msg(data.message)
                    }
                }
            });
        });

        //spu保存
        $("#saveSpu").click(function () {
            var rows = $('#dataTable').bootstrapTable("getSelections");
            var actionType = $("#actionType").val();
            if (actionType == '') {
                layer.msg("请选择闲鱼状态!");
                return;
            }
            if (actionType == 0 && $("#spuId").val() == '') {
                layer.msg("请输入闲鱼SPU!");
                return;
            }
            if ($("#spuId_hidden").val() == '' && actionType == 1) {
                layer.msg("未挂载spu!");
                return;
            }
            if ($("#spuId").val().length > 10) {
                layer.msg("spu编码超长(长度<=10)!");
                return;
            }
            $.confirm({
                title: '确认!',
                content: '确定要对闲鱼端：' + rows[0].cardOperatorName + '【<span style=\'color:red;font-weight:bold;\'>' + {
                    "0": "上架",
                    "1": "下架"
                }[actionType] + '</span>】吗？',
                confirm: function () {
                    $.ajax({
                        type: "POST",
                        url: '/CardProductController/xianyuSpuModify',
                        data: {
                            actionType: actionType,
                            productType: $("#productType").val(),
                            spuId: $("#spuId").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                $("#myModalBySpu").modal("hide");
                                $("#dataTable").bootstrapTable("refresh");
                                layer.msg("操作成功");
                            } else {
                                layer.msg(data.message);
                            }
                        }
                    });
                }
            })

        });

        //闲鱼状态触发事件
        $("#actionType").change(function () {
            var actionType = $("#actionType").val();
            var spuHidden = $("#spuId_hidden").val();
            if (actionType == 1 || spuHidden != '') {
                $("#spuId").attr("readonly", true);
            } else {
                $("#spuId").attr("readonly", false);
            }
            $("#spuId").val(spuHidden);
        });
    });

    function updateCardOperator() {
        $("#addOperatorModalLabel").attr("msg", 2)
        $("#addOperatorModalLabel").text("编辑卡种");
        var rows = $('#dataTable').bootstrapTable("getSelections");
        if (rows == null || rows.length == 0) {
            layer.msg("请选择要操作的数据");
            return;
        }
        if (rows.length > 1) {
            layer.msg("只能选择一个卡种");
            return;
        }
        $("#hidCardOperatorId").val(rows[0].id);
        $("#editCardTypeId").val(rows[0].cardTypeId)
        $("#editCardOperatorId").val(rows[0].cardOperatorId)
        $("#editCardOperatorName").val(rows[0].cardOperatorName)
        $("#editXianyuOperatorName").val(rows[0].xianyuOperatorName)
        $("#tipText").val(rows[0].tipText)
        $("#ticketTipText").val(rows[0].ticketTipText)
        var oFileInput = new FileInput();
        oFileInput.Init("logoColoursFile", "CardProductController/getByte");
        oFileInput.Init("logoFile", "CardProductController/getByte");
        $("#myModa9").modal("show");
    }

    function addCardOperator() {
        $("#addOperatorModalLabel").attr("msg", 1)
        $("#addOperatorModalLabel").text("新增卡种");
        $("#hidCardOperatorId").val("");
        $("#editCardTypeId").val("");
        $("#editCardOperatorId").val("");
        $("#editCardOperatorName").val("");
        $("#editXianyuOperatorName").val("");
        $("#tipText").val("");
        //0.初始化fileinput 1:新增; 2:修改
        var oFileInput = new FileInput();
        oFileInput.Init("logoColoursFile", "CardProductController/getByte");
        oFileInput.Init("logoFile", "CardProductController/getByte");
        $("#myModa9").modal("show");
    }

    //闲鱼原价回收状态
    function updateXianyuOriginalPriceRecovery() {
        var rows = $('#dataTable').bootstrapTable("getSelections");
        if (rows == null || rows.length == 0) {
            layer.msg("请选择要操作的数据");
            return;
        }
        if (rows.length > 1) {
            layer.msg("请选择一条数据进行操作");
            return;
        }
        $.confirm({
            title: '确认!',
            content: '确定要对' + rows[0].cardOperatorName + '<span color="red"> " ' + {
                "1": "关闭",
                "0": "开启"
            }[rows[0].originalPriceRecoveryStatus] + '</span>"原价回收功能吗？',
            confirm: function () {
                var status = rows[0].originalPriceRecoveryStatus == 1 ? 0 : 1;
                $.ajax({
                    type: "POST",
                    url: "/CardProductController/updateXianyuOriginalRecoveryStatus",
                    data: {
                        id: rows[0].id,
                        status: status,
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            $("#dataTable").bootstrapTable("refresh");
                            layer.msg("操作成功");
                        } else {
                            layer.msg(data.message)
                        }
                    }
                });
            },
            cancel: function () {

            }
        })


    }

    //闲鱼spu上下架
    function updateXianyuSpuStatus() {
        var rows = $('#dataTable').bootstrapTable("getSelections");
        if (rows == null || rows.length == 0) {
            layer.msg("请选择要操作的数据");
            return;
        }
        if (rows.length > 1) {
            layer.msg("请选择一条数据进行操作");
            return;
        }
        $("#spuId_hidden").val(rows[0].spuid);
        $("#actionType").val("");
        $("#spuId").val("");
        $("#productType").val(rows[0].cardOperatorId);
        $("#myModalBySpu").modal("show");
    }

    function queryParams(params) {
        return {
            'pageUnit.size': params.pageSize,
            'pageUnit.page': params.pageNumber,
            cardOperatorName: $.trim($("#cardOperatorName").val()),
            cardTypeId: $("#cardTypeId").val(),
            cardOperatorId: $("#query_cardOperatorId").val(),
            spuid: $("#query_spuid").val(),
            spuStatus: $("#spuStatus").val()
        };
    }
</script>
</body>
</html>
